<template>
  <layout-slot>
    <article class="main-content page-page">
      <div class="post-header">
        <h1 class="post-title" itemprop="name headline">
          影视 </h1>
        <div class="post-data">

          <time datetime="2020-08-22T23:56:00+08:00" itemprop="datePublished"><i class="fa fa-clock-o"
                                                                                 aria-hidden="true"> </i>
            {{ moviesDetail.articleUpdated |  dateFormat('{y}-{m}-{d}')  }}
          </time>&nbsp;&nbsp; <i class="fa fa-comments-o" aria-hidden="true"></i> <a href="#comments"> {{ comments }} 评论</a>&nbsp;&nbsp;
          <i class="fa fa-eye" aria-hidden="true"></i> {{ moviesDetail.articleViewCount }} 浏览
        </div>
      </div>
      <div id="post-content" class="post-content" v-html="moviesDetail.articleContent">
        <!--        <div data-status="watched" class="douban-movie-list doubanboard-list"></div>-->
        <!--        <div class="douban-loadmore" id="loadMoreMovies_watched" onclick="DoubanBoard.loadMovies('watched');">加载中...-->
        <!--        </div>-->
<!--        <div v-for="item of moviesList">-->
<!--          <p>{{ item.type }}</p>-->
<!--          <blockquote>-->
<!--            <p>{{ item.detail }}</p>-->
<!--          </blockquote>-->
<!--        </div>-->

<!--        <h1>Video赏析</h1>-->
<!--        <p><a href="https://www.bilibili.com/movie/" target="_blank">https://www.bilibili.com/movie/</a></p>-->
<!--        <h1>在线影视网址推荐</h1>-->
<!--        <p>-->
<!--          <a href="https://v.qq.com/" target="_blank">https://v.qq.com/</a><br>-->
<!--          <a href="https://www.iqiyi.com/" target="_blank">https://www.iqiyi.com/</a>-->
<!--        </p>-->



      </div>
    </article>
    <message/>
  </layout-slot>
</template>

<script>
  import LayoutSlot from "./slot/layout-slot";
  import Message from "@/components/Twikoo";
  import {getMoviesDetail, recordCount} from "@/api/home";
  import {mapState} from "vuex";

  export default {
    name: "movies",
    data() {
      return {
        // moviesList: [
        //   {
        //     type: "动漫：",
        //     detail: "犬夜叉、魔法咪路咪路、火影忍者、七龙珠、神龙斗士、铁胆火车侠、爆丸小子、蜡笔小新、斗罗大陆、名侦探柯南、妖精的尾巴" +
        //       "、海贼王、小宋当家、神探威威猫、快乐星猫、喜羊羊、百兽战队牙吠连者、天眼、神兽金刚、超兽武装、少林小子、成龙历险记、迪迦..."
        //   },
        //   {type: "电影院踪迹：", detail: "名侦探柯南：绯色的子弹、复仇者联盟4：终局之战、哪吒之魔童降世..."},
        //   {type: "美韩剧踪迹：", detail: "鱿鱼游戏、匹诺曹、Doctor异乡人、W两个世界、蓝色大海的传说..."}
        // ]
        moviesDetail: {},
      }
    },
    components: {Message, LayoutSlot},
    computed:{
      ...mapState({
        comments:state => state.comments
      })
    },
    methods: {
      getMoviesPage() {
        this.$store.commit("setLoading",true)
        getMoviesDetail({path: "/movies"}).then(({data}) => {
          this.moviesDetail = data.data
          this.$store.commit("setLoading",false)

          // 记录浏览量
          recordCount({id: data.data.oId}).then((res) => {
          })
        })
      }
    },
    mounted() {
      this.getMoviesPage()
    }
  }
</script>

<style scoped>

</style>
